<script setup>
import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
import {ref,onMounted} from 'vue'
let firstThree = ref()
const scene = new THREE.Scene()

const group = new THREE.Group()
scene.add(group)
const geometry = new THREE.BoxGeometry(50,50,50)

// 线模型所使用的点材质
const metaerial = new THREE.MeshLambertMaterial({
  color:0x00ffff,
  transparent:true,
  opacity:0.5,
})


const mesh = new THREE.Mesh(geometry, metaerial); 
mesh.position.x = 50;
// 更改物体的相对坐标原点
mesh.translateX(30)
group.add(mesh)
group.position.x = 40;
/**
 * 所谓本地坐标就是物体对象本身的左边
 * 世界坐标就是物体本身的坐标再加上所有父节点偏移的坐标
 * 如：mesh:本地坐标-50，
 *          世界坐标-90
 */

// 获取世界坐标
let vertor = new THREE.Vector3()
mesh.getWorldPosition(vertor);
console.log(vertor)

const axeshelper = new THREE.AxesHelper(100);
scene.add(axeshelper)

// 环境光
const ambient = new THREE.AmbientLight("#fff",0.8)
scene.add(ambient)

const width = window.innerWidth;
const height = window.innerHeight;

const camera = new THREE.PerspectiveCamera(100,width/height,1,8000)
camera.position.set(100,100,200)
camera.lookAt(0,0,0) 

// 解决渲染出来的图像有锯齿
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width,height)
renderer.render(scene,camera)

const controls = new OrbitControls(camera,renderer.domElement)
controls.addEventListener("change",function(){
  renderer.render(scene,camera)
})
onMounted(()=>{
  document.getElementById("firstThree").appendChild(renderer.domElement)
})

</script>

<template>
  <div id="firstThree" ref="firstThree"></div>
</template>

<style scoped>
  #firstThree{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
  }
</style>
